<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>事件分配</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
  <!-- <script type="text/javascript"
    src="http://api.tianditu.gov.cn/api?v=3.0&tk=e851d2d44c01350840e479724abfcd7e"></script> -->
  <style>
    .container {
      margin: auto;
      width: 100%;
    }

    .control-group {
      margin-bottom: 15px;
    }

    label {
      display: inline-block;
      /* width: 120px; */
    }

    input {
      padding: 5px;
    }

    #result_container {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ddd;
      background: #fff;
    }

    .reverse-search {
      margin-top: 20px;
      padding: 15px;
      border: 1px dashed #ccc;
      background: #f5f7fa;
    }

    .map-tip {
      margin-top: 5px;
      color: #666;
      font-size: 12px;
    }

    .click-tip {
      margin-top: 5px;
      color: #f60;
      font-size: 12px;
      font-weight: bold;
    }

    .map-loading {
      position: relative;
    }

    .map-loading::after {
      content: "地图加载中...";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.8);
      padding: 10px 20px;
      border-radius: 5px;
      z-index: 1000;
    }

    /* 为地图容器添加相对定位上下文 */
    .map-container {
      position: relative;
      width: 100%;
    }
  </style>
</head>

<body onLoad="onLoad()">
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">{{action=='Add'?'添加信息':action=='Modify'?'事件分配信息':action=='Query'?'事件查看':''}}</div>
      </div>
    </header>

    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'complaints', 'form': 'dataForm' ,'primary_key':'complaint_id' })">

      <div style="height: 100px;">
        <el-steps direction="horizontal" :active="activeStep" align-center>
          <el-step v-for="(step, index) in steps" :key="index" :title="step.BusinessName"
            :description="step.description"></el-step>
        </el-steps>
      </div>


      <div id="ChildTable">

        <!-- 处理附件子表信息 -->
        <el-descriptions :column="2" size="large" border
          :data-options="JSON.stringify({'TableName': 'complaints_attachments', 'form': 'childDataForm1', 'ParentTableName': 'complaints'})">
        </el-descriptions>



        <div class="table_titel">
          <div class="titel">分配人员信息{{childDataForm2.filter(item => item.Row_Status != '1').length == 0?'(暂无数据)':''}}
          </div>
          <div class="operation">
            <!-- <el-button type="primary" size="small" @click="handleAdd('childDataForm2')">新增</el-button> -->
            <!-- <el-button type="danger" size="small" @click="handleRemove('childDataForm2')">删除</el-button> -->
          </div>
        </div>


        <el-form :model="{childDataForm2}" ref="form1" inline-message="true" style="width: 100%">

          <el-descriptions
            :data-options="JSON.stringify({ 'TableName': 'complaints_processing_records', 'form': 'childDataForm2', 'ParentTableName': 'complaints'})"
            :column="2" size="large" border
            v-for="(item,index) in childDataForm2.filter(item => item.Row_Status != '1')" :key="index">



            <!-- <el-descriptions-item>
              <template #label>
                <div class="cell-item">人员</div>
              </template>
              <el-form-item :prop="'childDataForm2.'+index+'.processor_id'"
                :rules="[{ required: true, message: '请选择人员', trigger: 'change' }]" prop="processor_id">
               
                <yl-select :disabled="Object.keys(item).some(function(aaaa){ return aaaa.includes('_Original')})"
                  :options="member" :props="{label:'Personal_Name',value:'ID_Card_Number'}" clearable
                  v-model="item.processor_id" placeholder="请选择人员">
                  <el-table-column prop="ID_Card_Number" width="180" show-overflow-tooltip
                    label="身份证号"></el-table-column>
                  <el-table-column prop="Personal_Name" show-overflow-tooltip label="姓名"></el-table-column>
                  <el-table-column prop="Agensies_Name" show-overflow-tooltip label="所属政府机构名称"></el-table-column>
                  <el-table-column prop="Gender" label="性别"></el-table-column>
                  <el-table-column prop="Nation" label="民族"></el-table-column>
                  <el-table-column prop="Registered_Residence" show-overflow-tooltip label="籍贯"></el-table-column>
                  <el-table-column prop="Contact_Phone" label="联系方式"></el-table-column>
                </yl-select>
                
              </el-form-item>
            </el-descriptions-item> -->

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">责任单位</div>
              </template>
              <el-form-item :prop="'childDataForm2.'+index+'.processor_id'"
                :rules="[{ required: true, message: '请选择责任单位', trigger: 'change' }]">
                <el-cascader :disabled="Object.keys(item).some(function(aaaa){ return aaaa.includes('_Original')})"
                  v-model="item.processor_id" placeholder="请选择责任单位" :options="organization" class="borderless-input"
                  style="width: 100%;" :props="{ emitPath: false,
                          value: 'Government_Agencies_SerialNumber', 
                          label: 'Agensies_Name',
                          children: 'children',checkStrictly: true }"></el-cascader>
              </el-form-item>
            </el-descriptions-item>
            <div v-if="Object.keys(item).some(function(aaaa){ return aaaa.includes('_Original')}) ">
              <el-descriptions-item :span="2">
                <template #label>
                  <div class="cell-item">处理类型</div>
                </template>
                <el-form-item :prop="'childDataForm2.'+index+'.action_type'"
                  :rules="[{ required: true, message: '请选择处理类型', trigger: 'change' }]">
                  <el-select disabled v-model.trim="item.action_type" placeholder="请选择处理类型" filterable
                    style="width: 100%">
                    <el-option v-for="(item,index) in Action_type" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template #label>
                  <div class="cell-item">处理意见</div>
                </template>
                <el-form-item :prop="'childDataForm2.'+index+'.content'">
                  <el-input type="textarea" :rows="5" disabled v-model.trim="item.content" class="borderless-input"
                    placeholder="请输入处理意见" />
                </el-form-item>
              </el-descriptions-item>
            </div>
          </el-descriptions>
        </el-form>
      </div>
      <div class="table_titel">
        <div class="titel">详细信息
        </div>

      </div>
      <el-form :model="dataForm" ref="form" inline-message="true" style="width: 100%">
        <el-descriptions :column="1" size="large" border>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">类别名称</div>
            </template>
            <el-form-item prop="category_id" :rules="[{ required: true, message: '请输入类别名称', trigger: 'blur' }]">
              <el-select disabled clearable v-model="dataForm.category_id" placeholder="请选择类别" filterable
                style="width: 100%">
                <el-option v-for="(item,index) in category" :key="index" :label="item.category_name"
                  :value="item.category_id"></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">事件来源</div>
            </template>
            <el-form-item prop="Source" :rules="[{ required: true, message: '请选择事件来源', trigger: 'change' }]">
              <el-select disabled clearable v-model="dataForm.Source" placeholder="请选择事件来源" filterable
                style="width: 100%">
                <el-option v-for="(item,index) in Source" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">标题</div>
            </template>
            <el-form-item prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
              <el-input disabled ref="title" v-model="dataForm.title" class="borderless-input" placeholder="请输入标题" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">上报人姓名</div>
            </template>
            <el-form-item prop="complaintperson" :rules="[{ required: true, message: '请输入上报人姓名', trigger: 'blur' }]">
              <el-input disabled ref="complaintperson" v-model="dataForm.complaintperson" class="borderless-input"
                placeholder="请输入上报人姓名" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">上报人联系方式</div>
            </template>
            <el-form-item prop="complaintperson_mobile"
              :rules="[{ required: true, message: '请输入上报人联系方式', trigger: 'blur' }]">
              <el-input disabled ref="complaintperson_mobile" v-model="dataForm.complaintperson_mobile"
                class="borderless-input" placeholder="请输入上报人联系方式" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">事件内容</div>
            </template>
            <el-input disabled type="textarea" :rows="5" ref="content" v-model="dataForm.content"
              class="borderless-input" placeholder="请输入事件内容" />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">省/市/区(县)</div>
            </template>
            <el-cascader disabled @change="changeCity" v-model="cityValue" filterable class="borderless-input"
              :props="{value:'value',label:'label',children:'children'}" placeholder="请选择省/市/区(县)" :options="city"
              style="width: 100%"></el-cascader>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">乡镇(街道)/村庄(社区)</div>
            </template>
            <el-form-item prop="Village_SerialNumber">
              <el-cascader disabled @change="changeCity1" class="borderless-input" v-model="cityValue1" filterable
                :props="{value:'ProvinceNumber',label:'Province',children:'children'}" placeholder="请选择乡镇(街道)/村庄(社区)"
                :options="city1" style="width: 100%"></el-cascader>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">详细地址</div>
            </template>
            <el-form-item prop="Address" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
              <el-input disabled id="text_" :disabled="cityValue1.length == 0" @input="changeAddress"
                v-model.trim="dataForm.Address" class="borderless-input" placeholder="请输入详细地址" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">地图</div>
            </template>
            <div class="container map-container">
              <!-- 天地图容器，移除绝对定位并添加到地图容器中 -->
              <div id="mapDiv" style="width: 100%; height: 400px; border: 1px solid #ccc"></div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">中心坐标</div>
            </template>
            <el-form-item prop="Coord" :rules="[{ required: true, validator:IS_Coords, trigger: 'blur' }]">
              <el-input disabled id="lcenter" v-loading="loading" type="textarea" disabled autosize="{ minRows: 2}"
                v-model.trim="dataForm.Coord" class="borderless-input" placeholder="请输入中心坐标" />
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>

      <div>
        <el-descriptions :column="1" size="large" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">附件</div>
            </template>

            <!-- <yl-upload disabled ref="ylUpload" drag :limit="9" :file="fileList"></yl-upload> -->

            <el-table id="table" border max-height="450" tooltip-effect="dark" :data="childDataForm1">
              <el-table-column min-width="180" prop="attachment_id" label="附件流水号"></el-table-column>

              <el-table-column min-width="180" prop="file_nameOriginal" label="附件名称"></el-table-column>

              <el-table-column width="200" fixed="right" align="center" label="操作">
                <template v-slot="{row}">
                  <el-button type="primary" size="small" @click="preview(row)">
                    预览
                  </el-button>
                  <el-button type="success" size="small" @click="download(row)">
                    下载
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-descriptions-item>

        </el-descriptions>
      </div>



      <!-- <div id="ChildTable">
        <div class="table_titel">
          <div class="titel">附件</div>
        </div>

        <el-descriptions :column="2" size="large" border
          :data-options="JSON.stringify({'TableName': 'complaints_attachments', 'form': 'childDataForm1', 'ParentTableName': 'complaints'})">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">附件</div>
            </template>
            <yl-upload disabled ref="ylUpload" drag  :limit="9" :file="fileList"></yl-upload>
          </el-descriptions-item>

        </el-descriptions> -->


      <!-- <div>


        <el-descriptions :column="1" size="large" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">附件</div>
            </template>
            <yl-upload disabled ref="ylUpload" drag :limit="9" :file="fileList"></yl-upload>
          </el-descriptions-item>
        </el-descriptions>
      </div>


    </div> -->

    </div>
    <yl-online-preview :file-url="fileUrl" v-model="showDialog"></yl-online-preview>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit1" :loading="loading3">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../../utils/utils.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="js/allocation.js"></script>
<script src="./js/api.js"></script>
<script type="text/javascript">
  var map,
    zoom = 12;
  marker = null;
  function onLoad() {
    // 获取DOM元素和初始值
    const lcenterElement = document.getElementById("lcenter");
    let initialValue = lcenterElement.value;

    // 初始化地图
    map = new TMap("mapDiv");
    let marker; // 声明标注变量

    // 处理初始坐标
    if (initialValue) {
      try {
        const values = JSON.parse(initialValue);
        const lng = values[0];
        const lat = values[1];

        map.centerAndZoom(new TLngLat(lng, lat), zoom);
        marker = new TMarker(new TLngLat(lng, lat));
        map.addOverLay(marker);
      } catch (error) {
        console.error("初始坐标解析失败:", error);
        map.centerAndZoom(new TLngLat(122.545418, 52.978303), zoom); // 默认北京坐标
      }
    } else {
      map.centerAndZoom(new TLngLat(122.545418, 52.978303), zoom); // 默认北京坐标
    }
    // 添加输入事件监听（核心逻辑）
    lcenterElement.addEventListener("input", function () {
      const newValue = this.value;
      console.log("坐标值更新:", newValue);
      // 防止空值导致错误
      if (!newValue) return;
      try {
        const values = JSON.parse(newValue);
        const lng = values[0];
        const lat = values[1];

        // 更新地图和标注
        map.centerAndZoom(new TLngLat(lng, lat), zoom);

        // 优化标注更新：先移除再添加，避免多个标注
        if (marker) map.removeOverLay(marker);
        marker = new TMarker(new TLngLat(lng, lat));
        map.addOverLay(marker);
      } catch (error) {
        console.error("坐标解析失败:", error);
        // 可以添加错误提示或自动填充默认值
      }
    });
  }
  // 百度坐标系(BD-09)转WGS-84
  function bd09ToWGS84(bd_lon, bd_lat) {
    var gcj = bd09ToGcj02(bd_lon, bd_lat);
    return gcj02ToWGS84(gcj.lng, gcj.lat);
  }
  // 百度坐标系(BD-09)转火星坐标系(GCJ-02)
  function bd09ToGcj02(bd_lon, bd_lat) {
    var x = bd_lon - 0.0065,
      y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI);
    var gcj_lon = z * Math.cos(theta);
    var gcj_lat = z * Math.sin(theta);
    return { lng: gcj_lon, lat: gcj_lat };
  }
  // 火星坐标系(GCJ-02)与WGS-84互转（简化版）
  function gcj02ToWGS84(gcj_lon, gcj_lat) {
    // 中国区域内GCJ-02到WGS-84的偏移参数（简化模型）
    var dLon = 0.0065;
    var dLat = 0.006;
    var radLat = (gcj_lat / 180) * Math.PI;
    var magic = Math.sin(radLat);
    magic = 1 - 0.0025 * Math.cos(2 * radLat);
    var sqrtMagic = Math.sqrt(magic);

    var wgs_lon =
      gcj_lon -
      (dLon * 180) / ((Math.PI * 6378137 * Math.cos(radLat)) / sqrtMagic);
    var wgs_lat = gcj_lat - (dLat * 180) / ((Math.PI * 6378137) / sqrtMagic);

    return { lng: wgs_lon, lat: wgs_lat };
  }
</script>

</html>